<template>
  <n-space vertical>
    <n-space justify="end">
      <n-button type="primary" size="small" @click="onAddHandle">
        <template #icon>
          <m-icon :icon="PlusOutlined"/>
        </template>
        新增
      </n-button>
    </n-space>
    <n-data-table
        remote
        bordered
        ref="table"
        :columns="columns.value"
        :data="tableData.value"
        :loading="loading"
        :row-key="(rowData) => rowData.id"
    />
  </n-space>
  <n-modal
      size="small"
      style="width: 600px;"
      v-model:show="showModal"
      preset="card">
    <template #header>
      <div>标题</div>
    </template>
    <div>
      <n-form
          ref="formRef"
          :model="addOrUpdateModel.value"
          :rules="addOrUpdateRules.value"
          label-placement="left"
          label-width="auto"
          require-mark-placement="right-hanging"
          size="small">
        <n-form-item label="类型" path="menuType">
          <n-select v-model:value="addOrUpdateModel.value.menuType" :options="sysMenuType" placeholder="类型"/>
        </n-form-item>
        <n-form-item label="名称" path="menuName">
          <n-input v-model:value="addOrUpdateModel.value.menuName" placeholder="名称"></n-input>
        </n-form-item>
        <n-form-item label="路径" path="path" v-if="addOrUpdateModel.value.menuType === 'C'">
          <n-input v-model:value="addOrUpdateModel.value.path" placeholder="路径用于在浏览器上方显示"></n-input>
        </n-form-item>
        <n-form-item label="路由" path="component" v-if="addOrUpdateModel.value.menuType === 'C'">
          <n-input v-model:value="addOrUpdateModel.value.component" placeholder="相对于前端views目录的路径"></n-input>
        </n-form-item>
        <n-form-item label="权限" path="perms">
          <n-input v-model:value="addOrUpdateModel.value.perms" placeholder="权限"></n-input>
        </n-form-item>
        <n-form-item label="备注" path="remark">
          <n-input v-model:value="addOrUpdateModel.value.remark" placeholder="备注"></n-input>
        </n-form-item>
        <n-form-item label="图标" path="iconName">
          <n-input v-model:value="addOrUpdateModel.value.iconName" placeholder="图标"></n-input>
        </n-form-item>
        <n-form-item label="排序" path="orderNum">
          <n-input v-model:value="addOrUpdateModel.value.orderNum" placeholder="排序"></n-input>
        </n-form-item>
      </n-form>
    </div>
    <template #action>
      <n-space justify="end">
        <n-button size="small" type="primary" @click="onSubmit">确认</n-button>
        <n-button size="small" @click="cancelModel">取消</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script setup>
import {NButton, NSpace, useDialog, useMessage} from 'naive-ui'
import {h, onMounted, reactive, ref} from "vue";
import {renderIcon, renderIconByName} from "../../../utils/index.js";
import {MIcon} from "../../../components/index.js";
import {DeleteOutlineOutlined, ModeEditOutlineOutlined, PlusOutlined} from '@vicons/material'
import {tree} from "../../../apis/sys/menu/index.js";
import {sysMenuType} from '../../../common/dict/index.js'

const dialog = useDialog()
const message = useMessage()
const loading = ref(false)
const isEdit = ref(false)
const formRef = ref(undefined)

onMounted(async () => {
  const res = await tree()
  if (res.data.code === 1) {
    tableData.value = res.data.data
  }
})
const addOrUpdateRules = reactive({
  value: {}
})
const addOrUpdateModelInitVal = {
  id: undefined,
  parentId: undefined,
  menuName: undefined,
  path: undefined,
  component: undefined,
  orderNum: undefined,
  perms: undefined,
  menuType: undefined,
  remark: undefined,
  iconName: undefined
}
const addOrUpdateModel = reactive({
  value: {
    id: undefined,
    parentId: undefined,
    menuName: undefined,
    path: undefined,
    component: undefined,
    orderNum: undefined,
    perms: undefined,
    menuType: undefined,
    remark: undefined,
    iconName: undefined
  }
})

const columns = reactive({
  value: [
    {
      title: '名称',
      key: 'menuName',
      align: 'center',
      width: 120,
      titleAlign: "center"
    },
    {
      title: '图标',
      key: 'iconName',
      align: 'center',
      titleAlign: "center",
      render(row) {
        return renderIconByName(row.iconName)
      }
    },
    {
      title: '类型',
      key: 'menuType',
      align: 'center',
      titleAlign: 'center'
    },
    {
      title: '路径',
      key: 'path'
    },
    {
      title: '组件',
      key: 'component'
    },
    {
      title: '权限',
      key: 'perms',
      align: 'center',
      titleAlign: "center"
    },
    {
      title: '排序',
      key: 'orderNum',
      align: 'center',
      titleAlign: "center"
    },
    {
      title: '状态',
      key: 'status',
      align: 'center',
      titleAlign: "center"
    },
    {
      title: '操作',
      width: 100,
      titleAlign: 'center',
      render(row) {
        return h(NSpace, {justify: "center"}, {
          default: () => [
            h(
                NButton,
                {
                  circle: true,
                  type: 'warning',
                  size: 'small',
                  onClick: onEditHandle
                },
                {icon: renderIcon(ModeEditOutlineOutlined)}
            ),
            h(
                NButton,
                {
                  circle: true,
                  type: 'error',
                  size: 'small',
                  onClick: () => onDeleteHandle(row.id)
                },
                {icon: renderIcon(DeleteOutlineOutlined)}
            )
          ]
        })
      }
    },
  ]
})

const cancelModel = () => {
  showModal.value = false
  addOrUpdateModel.value = addOrUpdateModelInitVal
}
const onSubmit = () => {
  showModal.value = false
}
const showModal = ref(false)
const onAddHandle = () => {
  showModal.value = true
  isEdit.value = false
}

const onEditHandle = () => {
  showModal.value = true
  isEdit.value = true
}

const onDeleteHandle = (id) => {
  dialog.warning({
    title: '警告',
    content: `你确定删除id=${id}的数据?`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      message.success('确定')
    },
    onNegativeClick: () => {
      message.error('取消')
    }
  })
}
const tableData = reactive({
  value: [
    {
      id: 1,
      name: '张三'
    },
    {
      id: 2,
      name: '张三'
    }
  ]
})

</script>

<style scoped>

</style>
